<template>
	<cu-custom  bgColor="bg-gray"  :isBack="isBack">
	<!-- Vue 3 正确写法 -->
	<!--    <template #backText>返回</template> -->
		<template #content>Check the bill</template>
	</cu-custom>
	
  <view class="container">
    <view class="content">
      <text class="instruction">
        Enter the first six and last four digits of the credit card
      </text>

      <!-- 前六位 -->
      <view class="input-group">
        <text class="label">First six digits </text>
		<text style="color: #D54941;">*</text>
        <view class="input-row">
          <input
            v-for="(item, index) in firstSix"
            :key="'first-' + index"
            :value="item"
            @input="handleInput($event, 'firstSix', index)"
            @focus="handleFocus('firstSix', index)"
            maxlength="1"
            type="number"
            class="digit-input"
            :focus="focusedGroup === 'firstSix' && focusedIndex === index"
          />
        </view>
      </view>

      <!-- 后四位 -->
      <view class="input-group">
        <text class="label">Last four digits </text>
		<text style="color: #D54941;">*</text>
        <view class="input-row">
          <input
            v-for="(item, index) in lastFour"
            :key="'last-' + index"
            :value="item"
            @input="handleInput($event, 'lastFour', index)"
            @focus="handleFocus('lastFour', index)"
            maxlength="1"
            type="number"
            class="digit-input"
            :focus="focusedGroup === 'lastFour' && focusedIndex === index"
          />
        </view>
      </view>

      <button class="query-btn" @click="submit">Query</button>
    </view>
  </view>
</template>

<script>
import cuCustom from '@/colorui/components/cu-custom.vue';
export default {
	components: {
		cuCustom
	},
  data() {
    return {
		isBack: false,
		firstSix: Array(6).fill(''),
		lastFour: Array(4).fill(''),
		// 当前聚焦的组和索引（用于控制 focus）
		focusedGroup: 'firstSix',
		focusedIndex: 0,
		// 记录每个输入框上次的值：{ 'firstSix-0': '5', 'lastFour-1': '3', ... }
		previousValues: {}
    };
  },
  methods: {
    // 聚焦时更新当前焦点位置（用于后续自动 focus）
    handleFocus(group, index) {
      this.focusedGroup = group;
      this.focusedIndex = index;
    },

    handleInput(event, group, index) {
      const key = `${group}-${index}`;
      const currentValue = event.detail.value;
      const previousValue = this.previousValues[key] || '';

      // 判断是否是退格：当前为空，且之前有值
      const isBackspace = currentValue === '' && previousValue !== '';

      if (isBackspace) {
        // 清空当前
        this[group][index] = '';
        this.previousValues[key] = '';

        // 跳转到前一个输入框
        if (index > 0) {
          // 同组前一个
          this.focusedGroup = group;
          this.focusedIndex = index - 1;
        } else if (group === 'lastFour' && index === 0) {
          // 从后四位第1位退格 → 跳到前六位最后一位
          this.focusedGroup = 'firstSix';
          this.focusedIndex = 5;
        }
        // 注意：不能 return，否则 previousValues 不更新（但已处理）
        return;
      }

      // 非退格：只允许输入单个数字
      if (!/^\d$/.test(currentValue)) {
        // 非法输入，恢复原值
        this[group][index] = previousValue;
        this.previousValues[key] = previousValue;
        return;
      }

      // 正常输入
      this[group][index] = currentValue;
      this.previousValues[key] = currentValue;

      // 自动跳转到下一个
      const total = group === 'firstSix' ? 6 : 4;
      if (index < total - 1) {
        this.focusedGroup = group;
        this.focusedIndex = index + 1;
      } else if (group === 'firstSix' && index === 5) {
        // 前六位输完 → 跳后四位第一个
        this.focusedGroup = 'lastFour';
        this.focusedIndex = 0;
      }
    },

    submit() {		
		const first = this.firstSix.join('');
		const last = this.lastFour.join('');
		if (first.length !== 6 || last.length !== 4) {
		uni.showToast({ title: 'Please fill in all digits', icon: 'none' });
			return;
		}
		var pos = "POS" + first + last
		console.log('Submitted:', { first, last });
      // ✅ 跳转到下一页，并携带参数（可选）
        uni.navigateTo({
          url: '/pages/sessionList/sessionList?POS=' + pos,
          success: () => {
            console.log('Navigation successful');
          },
          fail: (err) => {
            console.error('Navigation failed:', err);
            uni.showToast({ title: 'Navigation failed', icon: 'none' });
          }
        });
    }
  }
};
</script>

<style scoped>
	page {
		background-color: #F2F4F6;
	}
	/* 样式同上，此处省略，可复用之前代码 */
	.container {
	  padding: 20rpx;
	  min-height: 100vh;
	}
	.header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 20rpx 0;
	  border-bottom: 1px solid #ddd;
	}
	.title {
	  font-size: 32rpx;
	  font-weight: bold;
	}
	.content {
	  margin-top: 40rpx;
	  padding: 0 20rpx;
	}
	.instruction {
	  color: #666;
	  font-size: 28rpx;
	  margin-bottom: 40rpx;
	  line-height: 1.5;
	}
	.input-group {
		margin-top: 32rpx;
	}
	.label {
		margin-top: 32rpx;
		font-size: 28rpx;
		color: #333;
	}
	.input-row {
		margin-top: 32rpx;
		display: flex;
		gap: 20rpx;
	}
	.digit-input {
	  width: 80rpx;
	  height: 80rpx;
	  text-align: center;
	  font-size: 32rpx;
/* 	  border: 1px solid #ddd; */
	  border-radius: 12rpx;
	  background: white;
	}
	
/* 	.digit-input:focus {
		border: 1px solid #ddd;
	} */
	
	.query-btn {
	  width: 100%;
	  height: 96rpx;
	  background: #32BB78;
	  color: white;
	  border: none;
	  border-radius: 24rpx;
	  font-size: 32rpx;
	  margin-top: 56rpx;
	}
</style>